<template>
    <div class="page-main">
        <el-form-item :label="title" prop="file_ids">
            <div class="file-box">
                <div class="item" v-for="item in data" :key="item.id" :label="item.name" :value="item.id">
                    <i class="el-icon-delete del-material" @click.stop="clickDelMaterial(item.id)"></i>
                    <el-image :src="item.url" ref="preview" class="material-img" :preview-src-list="srcList">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <i class="el-icon-plus item-default" @click="clickSelectMaterialImg"></i>
            </div>
        </el-form-item>
        <x-material ref="material" :multiple=true :title="title" @changeMaterial="changeMaterial" />
    </div>
</template>

<script>
export default {
    name: "x-select-material-by-form-item",
    props: {
        title: {
            type: String,
            default: '选择图片'
        },
        multiple: {
            type: Boolean,
            default: true
        }
    },
    components: {
        'x-material': () => import('@/components/common/xMaterial')
    },
    data() {
        return {
            data: [],
            srcList: []
        };
    },
    mounted() {
    },
    methods: {
        changeMaterial(material) {
            let data = this.data.concat(...material);
            let temp = this.data;
            let ids = this.data.map(item => item.id);
            data.forEach(function (item) {
                if (item && (ids.indexOf(item.id) >= 0) === false) {
                    temp.push(item)
                }
            });
            this.data = temp;
            this.srcList = this.data.map(item => item.url);
        },
        clickSelectMaterialImg() {
            this.$refs.material.dialogFormVisible = true;
        },
        clickDelMaterial(id) {
            this.data.splice(this.data.findIndex(item => item.id === id), 1);
        },
        resetMaterial() {
            this.data = [];
            this.srcList = [];
        },
        initData(data) {
            this.data = data;
            this.srcList = this.data.map(item => item.url);
        }
    },
    watch: {
        'data.length': function (newVal, oldVal) {
            if (newVal !== oldVal) {
                this.$emit('childEvent', this.data)
            }
        }
    }
}
</script>

<style scoped lang="less">
.page-main {
    .file-box {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;

        .item {
            width: 60px;
            height: 60px;
            padding: 3px;
            position: relative;
            border: 1px solid var(--borderGrey);

            &:hover {
                border: 1px solid var(--borderBlue);
                cursor: pointer;
            }

            &:hover .del-material {
                display: block;
            }

            .el-image {
                width: 100%;
                height: 100%;
            }

            .del-material {
                position: absolute;
                top: -6px;
                right: -6px;
                color: red;
                display: none;
                font-size: 12px;
                z-index: 1;
                border-radius: 50%;
                border: 1px solid var(--borderGrey);
                background-color: white;
                padding: 3px;
                box-sizing: border-box;
                cursor: pointer;

                &:hover {
                    border: 1px solid red;
                }
            }
        }

        .item-default {
            width: 60px;
            height: 60px;
            font-size: 18px;
            line-height: 60px;
            text-align: center;
            border: 1px solid var(--borderGrey);

            &:hover {
                color: var(--fontDarkBlue);
                border: 1px solid var(--borderBlue);
                cursor: pointer;
            }

        }
    }
}
</style>